<template>
  <div class="container">
    <!-- 新增试题按钮 -->
    <el-card style="margin:10px">
      <el-row type="flex" justify="end" style="margin-bottom:20px">
        <el-col :span="2">
          <el-button class="hardadd"
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          >
        </el-col>
      </el-row>
      <!-- /新增试题按钮 -->
      <!-- 表单 -->
      <el-form label-width="80px">
        <el-row type="flex">
          <el-form-item label="学科" label-width="100px">
            <el-select @change="subjectIDchange" v-model="formdata.subjectID" class="size" size="small">
              <el-option
                :value="item.value"
                v-for="item in subjectIDlist"
                :key="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录" label-width="100px">
            <el-select v-model="formdata.catalogID" class="size" size="small">
              <el-option v-for="item in catalogIDlist" :key="item.value" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" label-width="100px">
            <el-select v-model="formdata.tags" class="size" size="small">
              <el-option v-for="item in tagslist" :key="item.value" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" label-width="100px">
            <el-input v-model="formdata.keyword" placeholder="根据题干搜索" class="size" size="small"></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="试题类型" label-width="100px">
            <el-select class="size" size="small" v-model="formdata.questionType">
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" label-width="100px">
            <el-select class="size" size="small" v-model="formdata.difficulty">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" label-width="100px">
            <el-select class="size" size="small" v-model="formdata.direction">
              <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人" label-width="100px">
            <el-select class="size" size="small" v-model="formdata.creatorID">
              <el-option
                v-for="item in creatorID"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="题目备注" label-width="100px">
            <el-input v-model="formdata.remarks" class="size" size="small"></el-input>
          </el-form-item>
          <el-form-item label="企业简称" label-width="100px">
            <el-input v-model="formdata.shortName" class="size" size="small"></el-input>
          </el-form-item>
          <el-form-item label="城市" label-width="100px">
            <el-select @change="cityslist" v-model="formdata.province" style="width:105px" size="small">
              <el-option v-for="(item, index) in provinces" :key="index" :value="item" :label="item"> </el-option>
            </el-select>
            <el-select style="width:109px;margin-left:5px" size="small" v-model="formdata.city">
              <el-option v-for="item in cityss" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="close" size="small" @click="Cancel">清除</el-button>
            <el-button type="primary" size="small" @click="btnok">搜索</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- /表单 -->
      <!-- 信息提示 -->
      <el-alert :title="`数据一共${listlength}条`" type="info" show-icon style="margin-bottom:20px" :closable="false">
      </el-alert>
      <!-- /信息提示 -->
      <!-- 表格 -->
      <el-table :header-cell-style="{ background: '#fafafa' }" :data="list">
        <el-table-column label="试题编号" prop="number" width="120"></el-table-column>
        <el-table-column label="学科" prop="subject" width="110"> </el-table-column>
        <el-table-column label="目录" prop="catalog" width="100"></el-table-column>
        <el-table-column label="题型" prop="questionType" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.questionType | formattype }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280">
          <template slot-scope="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="180">
          <template slot-scope="{ row }">
            <span>{{ start(row.addDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty" width="105">
          <template slot-scope="{ row }">
            <span>{{ row.difficulty | formatDiff }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" width="105"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{ row }">
            <el-button
              @click="SeeSpecific(row.id)"
              type="primary"
              plain
              size="small"
              icon="el-icon-view"
              circle
            ></el-button>
            <el-button
              @click="$router.push(`/questions/new?${row.id}`)"
              type="success"
              plain
              size="small"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              @click="butremove(row.id)"
              type="danger"
              plain
              size="small"
              icon="el-icon-delete"
              circle
            ></el-button>
            <el-button
              @click="Joinselection(row)"
              type="warning"
              plain
              size="small"
              icon="el-icon-check"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格 -->
      <!-- 页码分页 -->
      <el-row style="margin-top:20px" type="flex" justify="end" align="middle">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :current-page="formdata.page"
          :total="formdata.total"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="5"
          @current-change="CurrentChange"
        >
        </el-pagination>
      </el-row>
      <!-- /页码分页 -->
    </el-card>
    <!-- 点击预览弹出层 -->
    <el-dialog title="题目预览" :visible="dialogshow" width="60%" @close="canCel">
      <el-row type="flex">
        <el-col>【题型】:{{ dialoglist.questionType | formattype }}</el-col>
        <el-col>【编号】:{{ dialoglist.id }}</el-col>
        <el-col>【难度】:{{ dialoglist.difficulty | formatDiff }}</el-col>
        <el-col>【标签】:{{ dialoglist.tags }}</el-col>
      </el-row>
      <el-row type="flex" style="margin:20px 0px">
        <el-col>【学科】:{{ dialoglist.subjectName }}</el-col>
        <el-col>【目录】:{{ dialoglist.directoryName }}</el-col>
        <el-col>【方向】:{{ dialoglist.direction }}</el-col>
        <el-col></el-col>
      </el-row>
      <hr />
      <el-row>
        【题干】:
      </el-row>
      <el-row style="margin-top:15px">
        <span v-html="dialoglist.question"></span>
      </el-row>
      <el-row style="margin-top:15px" v-if="showtype(dialoglist.questionType)">
        {{ dialoglist.questionType }} 选项：（以下选中的选项为正确答案）
        <el-checkbox-group v-model="checkList">
          <el-col v-for="item in dialoglist.options" :key="item.id">
            <el-checkbox :label="item.isRight" style="margin-top:15px">{{ item.title }}</el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-row>
      <hr />
      <el-row>
        【参考答案】:<el-button type="danger" size="small" style="margin-left:10px" @click="videoshow = true"
          >视频答案预览</el-button
        >
      </el-row>
      <el-row>
        <video
          v-if="videoshow"
          :src="dialoglist.videoURL"
          autoplay
          controls
          style="height:240px;width:320px; background-color: #333333;"
        ></video>
      </el-row>
      <hr />
      <el-row style="margin:20px 0px">
        <span>【答案解析】:</span>
        <span v-html="dialoglist.answer" style="text-align: left;display: inline-block;"></span>
      </el-row>
      <hr />
      <el-row>
        <span>【题目备注】:</span>
        <span v-html="dialoglist.remarks" style="text-align: left;display: inline-block;"></span>
      </el-row>
      <el-row type="flex" justify="end" style="margin-top:25px">
        <el-button type="primary" @click="canCel">关闭</el-button>
      </el-row>
    </el-dialog>
    <!-- /点击预览弹出层 -->
  </div>
</template>

<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as getsimple } from '@/api/hmmm/directorys'
import { simple as gettags } from '@/api/hmmm/tags'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { list as userslist } from '@/api/base/users'
import { citys, provinces } from '@/api/hmmm/citys'
import moment from 'moment'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      list: [], // 用来存放基础题库的所有数据
      page: {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        total: 0 // 存放页码数
      },
      formdata: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },
      subjectIDlist: [], // 存放所有学科的列表
      catalogIDlist: [], // 存放所有目录的
      tagslist: [], // 存放所有标签
      questionType: questionType, // 存放试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      creatorID: [], // 录入人
      listlength: '', // 用来存放总书数据的
      cityss: [], // 所有城市下的区域
      provinces: [], // 所有城市
      checkList: [1], // 弹出层多选框
      dialoglist: [], // 存储弹出层数据
      dialogshow: false, // 控制弹出层
      videoshow: false // 视频标签
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getlist()
    this.getsubjectID()
    this.gettags()
    this.getuserslist()
    this.provinceslist()
  },
  mounted () {},
  methods: {
    // 点击搜索
    async btnok () {
      if (this.formdata.subjectID) {
        const res = await list({ subjectID: this.formdata.subjectID, ...this.page })
        this.listlength = res.data.items.length
        this.formdata.total = res.data.counts
        this.page.page = res.data.page
        this.page.pagesize = res.data.pagesize
        this.list = res.data.items
      } else if (this.formdata.keyword) {
        const res = await list({ keyword: this.formdata.keyword, ...this.page })
        this.listlength = res.data.items.length
        this.formdata.total = res.data.counts
        this.page.page = res.data.page
        this.page.pagesize = res.data.pagesize
        this.list = res.data.items
      }
    },
    // 获取前所有基础题的方法
    async getlist () {
      const res = await list(this.page)
      this.listlength = res.data.items.length
      this.formdata.total = res.data.counts
      this.page.page = res.data.page
      this.page.pagesize = res.data.pagesize
      this.list = res.data.items
      // console.log(this.list)
    },
    // // 获取学科列表
    async getsubjectID () {
      const res = await simple()
      this.subjectIDlist = res.data
    },
    // // 获取目录
    async getcatalogID () {
      const res = await getsimple({ subjectID: this.formdata.subjectID })
      this.catalogIDlist = res.data
    },
    // // 获取标签
    async gettags () {
      const res = await gettags({ subjectID: this.formdata.subjectID })
      this.tagslist = res.data
    },
    // // 获取所有用户
    async getuserslist () {
      const res = await userslist()
      this.creatorID = res.data.list
    },
    // 学科发生改变，从新获取目录跟标签
    subjectIDchange () {
      this.getcatalogID()
      this.gettags()
    },
    // 获取所有城市
    async provinceslist () {
      this.provinces = await provinces()
    },
    // 获取所有城市下的区域
    async cityslist () {
      const res = await citys(this.formdata.province)
      this.cityss = res
    },
    // 删除基础题
    async butremove (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示').then(async () => {
        await remove({ id: id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getlist() // 重新获取数据
      })
    },
    // 添加到精选题
    async Joinselection (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示').then(async () => {
        await choiceAdd({ id: row.id, choiceState: 1 })
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.getlist() // 重新获取数据
      })
    },
    // 页码改变
    CurrentChange (val) {
      console.log(val)
      this.page.page = val
      this.getlist()
    },
    // 每页显示多少数据改变
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getlist()
    },
    // 点击清空
    Cancel () {
      this.formdata = {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      }
      this.cityss = []
    },
    // 处理时间的方法
    start (data) {
      return moment(data).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击预览试题
    async SeeSpecific (id) {
      const res = await detail({ id: id })
      this.dialoglist = res.data
      this.dialogshow = true
    },
    // 处理弹出层是什么题型是否显示选择框
    showtype (type) {
      if (type === '1') {
        return true
      } else if (type === '2') {
        return true
      } else {
        return false
      }
    },
    // 点击关闭预览试题
    canCel () {
      this.dialogshow = false
    }
  },
  // 改变难度将数字转换为汉字的方法
  filters: {
    formatDiff (row) {
      const obj = difficulty.find(item => item.value === +row)
      return obj ? obj.label : ''
    },
    // 转换题干
    formattype (row) {
      const obj = questionType.find(item => item.value === +row)
      return obj ? obj.label : ''
    }

  }
}
</script>

<style scoped lang="scss">
.el-row--flex {
  padding-right: 20px;
}
.size {
  width: 220px;
}
.close {
  margin-left: 96px;
}
</style>
